<template>
  <view class="page-container">
    <!-- 页面内容 -->
    <view class="content">
      <button class="modify-btn" @click="showModifyDialog">修改密码</button>
    </view>
    
    <!-- 修改密码对话框 -->
    <view class="dialog-mask" v-if="showDialog">
      <view class="dialog-container">
        <view class="dialog-header">
          <text class="dialog-title">修改密码</text>
          <text class="close-btn" @click="showDialog = false">×</text>
        </view>
        
        <view class="form-group">
          <view class="form-item">
            <input 
              v-model="oldPassword" 
              type="password" 
              placeholder="请输入原密码"
              :class="{ 'error': oldPasswordError }"
            />
            <text v-if="oldPasswordError" class="error-tip">原密码不能为空</text>
          </view>
          
          <view class="form-item">
            <input 
              v-model="newPassword" 
              type="password" 
              placeholder="请输入新密码(6-20位)"
              :class="{ 'error': newPasswordError }"
            />
            <text v-if="newPasswordError" class="error-tip">
              {{ newPasswordLengthError ? '密码长度需6-20位' : '新密码不能为空' }}
            </text>
          </view>
          
          <view class="form-item">
            <input 
              v-model="confirmPassword" 
              type="password" 
              placeholder="请再次输入新密码"
              :class="{ 'error': confirmPasswordError }"
            />
            <text v-if="confirmPasswordError" class="error-tip">
              {{ confirmPassword !== newPassword ? '两次密码不一致' : '确认密码不能为空' }}
            </text>
          </view>
        </view>
        
        <view class="dialog-actions">
          <button class="cancel-btn" @click="showDialog = false">取消</button>
          <button class="confirm-btn" @click="submitModify">确认修改</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import request from '@/utils/request.js';
export default {
  data() {
    return {
      showDialog: false,            // 控制对话框显示隐藏
      oldPassword: '',              // 原密码
      newPassword: '',              // 新密码
      confirmPassword: '',          // 确认新密码
      
	  userName:'',
      // 表单验证状态
      oldPasswordError: false,
      newPasswordError: false,
      newPasswordLengthError: false,
      confirmPasswordError: false
    }
  },
  methods: {
    // 显示修改密码对话框
    showModifyDialog(username) {
      // 重置表单数据和验证状态
      this.oldPassword = '';
      this.newPassword = '';
      this.confirmPassword = '';
	  this.userName = username;
      
      this.oldPasswordError = false;
      this.newPasswordError = false;
      this.newPasswordLengthError = false;
      this.confirmPasswordError = false;
      
      this.showDialog = true;
	  console.log("修改密码：" + this.userName)
    },
    
    // 验证表单
    validateForm() {
      let isValid = true;
      
	  if(!this.userName){
		  isValid = false;
	  }
	  
      // 验证原密码
      if (!this.oldPassword) {
        this.oldPasswordError = true;
        isValid = false;
      } else {
        this.oldPasswordError = false;
      }
      
      // 验证新密码
      if (!this.newPassword) {
        this.newPasswordError = true;
        this.newPasswordLengthError = false;
        isValid = false;
      } else if (this.newPassword.length < 6 || this.newPassword.length > 20) {
        this.newPasswordError = true;
        this.newPasswordLengthError = true;
        isValid = false;
      } else {
        this.newPasswordError = false;
        this.newPasswordLengthError = false;
      }
      
      // 验证确认密码
      if (!this.confirmPassword) {
        this.confirmPasswordError = true;
        isValid = false;
      } else if (this.confirmPassword !== this.newPassword) {
        this.confirmPasswordError = true;
        isValid = false;
      } else {
        this.confirmPasswordError = false;
      }
      
      return isValid;
    },
    
    // 提交修改密码
    async submitModify() {
      if (!this.validateForm()) {
        return;
      }
      
      uni.showLoading({
        title: '正在修改...'
      });
      
	  console.log("修改用户密码：" + this.userName)
      try {
        // 调用API修改密码
		await request.post('/api/users/modifyPassword', {
				oldPassword: this.oldPassword,
				newPassword: this.newPassword,
				userName:this.userName
		});
        
        uni.hideLoading();
        
        // if (res.data.code === 200) {
          uni.showToast({
            title: '密码修改成功',
            icon: 'success',
            duration: 2000
          });
          
          // 关闭对话框
          setTimeout(() => {
            this.showDialog = false;
          }, 1500);
        // } else {
        //   uni.showToast({
        //     title: res.data.message || '密码修改失败',
        //     icon: 'none'
        //   });
        // }
      } catch (error) {
        uni.hideLoading();
        console.error('修改密码请求失败:', error);
        uni.showToast({
          title: '网络错误，请稍后重试',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style>
.page-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.content {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.modify-btn {
  padding: 12px 30px;
  background-color: #409eff;
  color: white;
  border-radius: 30px;
  font-size: 16px;
}

/* 对话框样式 */
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.dialog-container {
  background-color: white;
  border-radius: 10px;
  width: 90%;
  max-width: 500px;
  overflow: hidden;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.dialog-title {
  font-size: 18px;
  font-weight: bold;
}

.close-btn {
  font-size: 24px;
  color: #909399;
}

.form-group {
  padding: 20px;
}

.form-item {
  margin-bottom: 20px;
}

.label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

uni-input input {
  padding: 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

/* 错误样式 */
.error {
  border-color: #f56c6c !important;
}

.error-tip {
  font-size: 12px;
  color: #f56c6c;
  margin-top: 5px;
}

.dialog-actions {
  display: flex;
  border-top: 1px solid #ebeef5;
}

.cancel-btn, .confirm-btn {
  flex: 1;
  padding: 15px;
  font-size: 16px;
  border: none;
}

.cancel-btn {
  color: #606266;
  background-color: #f5f7fa;
}

.confirm-btn {
  color: white;
  background-color: #409eff;
}
</style>